<template>
  <div style="margin-right: 20px; margin-left: -20px">
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction :actions="getActions(record)" />
      </template>
    </BasicTable>
    <Detail @register="registerDesc" />
  </div>
</template>
<script lang="ts" name="user-access-log" setup>
import { ref, Ref, onMounted } from "vue"
import { BasicTable, TableAction } from "/@/components/Table"
import { useDrawer } from "/@/components/Drawer"
import { useListPage } from "/@/hooks/system/useListPage"
import { useUserStore } from "/@/store/modules/user"
import * as logApi from "/@/api/infra/operateLog"
import { operateLogColumns, operateLogSearchFormSchema } from "../data"
import Detail from "./OperateLogDetail.vue"
import { useMessage } from "/@/hooks/web/useMessage"
const { createMessage } = useMessage()
const [registerDesc, { openDrawer: openLogDesc }] = useDrawer()

const { prefixCls, tableContext } = useListPage({
  designScope: "access-log",
  tableProps: {
    title: "操作日志",
    api: logApi.pageLog,
    columns: operateLogColumns,
    beforeFetch: (params) => {
      params.userId = useUserStore().getUserInfo.id
    },
    bordered: false,
    canResize: false,
    rowSelectionTipType: "onTableTitle",
    actionColumn: {
      width: 130,
      title: "操作",
      dataIndex: "action",
      fixed: false,
      slots: { customRender: "action" },
    },
    formConfig: {
      labelWidth: 70,
      schemas: operateLogSearchFormSchema,
      fieldMapToTime: [["fieldTime", ["beginDate", "endDate"], "YYYY-MM-DD HH:mm:ss"]],
    },
  },
})

const [registerTable, { reload, getForm }, {}] = tableContext

onMounted(async () => {
  const { updateSchema } = getForm()
  updateSchema({
    field: "logTypeId",
    componentProps: ({}) => {
      return {
        optionFilterProp: "label",
        showSearch: true,
        allowClear: true,
        api: logApi.listLogType,
        params: {
          parentKey: "0",
        },
        onSelect: async (value: any, option: any) => {
          console.log("value", value)
          reload()
        },
      }
    },
  })
})

function getActions(record) {
  return [
    {
      label: "详情",
      onClick: handleDesc.bind(null, record),
    },
  ]
}

function handleDesc(record) {
  openLogDesc(true, {
    record,
    isUpdate: true,
  })
}
</script>
